<template>
  <div>
    <TopTitle title="请填写您的信息" />
    <el-form 
      ref="form" 
      :model="form" 
      :rules="rules" 
      label-width="100px" 
      class="subcribeForm">
      <el-card class="clearfix otherClearfix userSubcribe">
        <div class="otherContent">
          <el-form-item class="userLabelSpacing" label="姓 名" prop="fullName">
            <el-input v-model="form.fullName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="userLabelSpacing" label="手 机" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label=" 所属单位" prop="affiliatedUnits">
            <el-input v-model="form.affiliatedUnits" placeholder="（选填）"></el-input>
          </el-form-item>
          <div class="uploadImg">
            <div class="uploadItem">
              <p>人脸照片</p>
              <el-form-item label-width="0" prop="photo">
                <el-upload
                  class="avatar-uploader"
                  action="/common/uploads"
                  list-type="picture-card"
                  :file-list="fileList1"
                  :limit="3"
                  :on-success="avatarSuccess"
                  :on-remove="handleRemove">
                  <!-- <img v-if="form.avatar" :src="form.avatar" alt="上传" class="avatar"> -->
                  <img src="../../assets/defultImg.png" alt="上传" class="avatar-uploader-icon"/>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-card>
      <div style="display: flex;justify-content: center;margin: 41px 0;" v-if="linkFrom">
        <el-button type="primary" round style="width: 157px;" @click="pushRoute">返回预约</el-button>
        <el-button type="primary" round style="width: 157px;" @click="submit">修改信息</el-button>
      </div>
      <div style="text-align: center;margin: 41px 0;" v-else>
        <el-button type="primary" round style="width: 157px;" @click="submit">下一步</el-button>
      </div>
    </el-form>
</div>
</template>

<script>
  //import { fetchPost } from '../../util';
  export default {
    components: {
    TopTitle: () => import("../../components/Title")
  },
    data() {
      return {
        form: {
          fullName: '',
          tel: '',
          idCard: '',
          affiliatedUnits: '',
          photo: ''
        },
        rules: {
          fullName: [{
            required: true,
            message: '请填写姓名',
            trigger: 'blur'
          }],
          tel: [{
            required: true,
            message: '请填写手机或手机号有误',
            pattern: /^1[3456789]\d{9}$/,
            trigger: 'blur'
          }],
          idCard: [{
            required: true,
            message: '请填写身份证号或身份证号有误',
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            trigger: 'blur'
          }],
          photo: [{
            required: true,
            message: '请上传人脸照片',
            trigger: 'change'
          }],
        },
        fileList: [],
        fileList1: [],
        linkFrom: this.$route.query.linkFrom && this.$route.query.linkFrom === 'subcribe' ? true : false 
      }
    },
    mounted() {
      const userInfo = sessionStorage.getItem("userInfo") ?? null;
      const baseMsg = sessionStorage.getItem("baseMsg") ?? null;
      if(baseMsg) {
        this.form = JSON.parse(baseMsg);
        const photoList = this.form.photo&&this.form.photo.split(",") || [];
        const fileList = photoList.map((item) => {
          return {
            name: '',
            url: item
          }
        })
        this.fileList = fileList;
        this.fileList1 = fileList;
      }else if(userInfo) {
        this.form = JSON.parse(userInfo);
        const photoList = this.form.photo&&this.form.photo.split(",") || [];
        const fileList = photoList.map((item) => {
          return {
            name: '',
            url: item
          }
        })
        this.fileList = fileList;
        this.fileList1 = fileList;
      }
    },
    methods:{
      avatarSuccess(res) {
        if(res.code === 0){
          this.form.photo = res.url;
          this.fileList.push({name: res.fileName, url: res.url})
        }
      },
      handleRemove(file) {
        const fileList = this.fileList.filter(item => item.url != file.url);
        this.fileList = fileList;
        if(this.fileList.length === 0) {
          this.form.photo = '';
        }
      },
      pushRoute() {
        this.$router.push('/subcribe');
      },
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const photo = this.fileList.map(item=> item.url);
            const baseMsg = {
              ...this.form,
              photo: photo.toString(),
            };
            sessionStorage.setItem("baseMsg",JSON.stringify(baseMsg));
            this.$router.push('/subcribe');
            // fetchPost("/api/customerAppointment/saveCustomerAppointment", {
            //   ...this.form,
            //   photo: photo.toString(),
            // }).then(data=>{
            //   if(data?.code === 0) {
            //     this.$router.push('/subcribe');
            //   }
            // })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .subcribeForm{
    margin-top: 46px;
  }
  .otherContent {
    padding: 20px;
  }
  .uploadItem p{
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 400;
  }
  .avatar {
    width: 101px;
    height: 101px;
    display: block;
  }
</style>
